<template>
  <div class="container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="(result,index) in results" :key="index" :title="result.title" /> -->
        <ContentItem :result="result" v-for="(result,index) in results" :key="index"></ContentItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {getContent} from '../../api/user'
import ContentItem from './ContentItem.vue'
export default {
  name: "Test",
  data() {
    return {
      results: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp:null,
    };
  },
  created() {
  },
  props: {},
  methods: {
    async onLoad(){
      const {data}=await getContent({ channel_id: this.channel.id, timestamp: this.timestamp || Date.now(), with_top: 1 })
      // console.log(data);
      const {results} =data.data
      // 将该次时间戳 作为参数 传递
      this.timestamp = data.data.pre_timestamp
      // 添加到新数组中
      this.results.push(...results)
      // 加载关闭
      this.loading= false
      if(results.length===0){
        // 如果没有数据则完成
        this.finished=true
      }
    },
    async onRefresh(){
      // 请求最新的时间戳  不一样的数据
      const { data } = await getContent({ channel_id: this.channel.id, timestamp: Date.now(), with_top: 1 })
      const { results } = data.data
      // 追加到contents的前面
      this.results.unshift(...results)
      this.$toast(`更新${results.length}条数据`)
      this.refreshing =false
    },
  },
  props:{
    channel:{
      type: [Array,Object]
    }
  },
  components:{
    ContentItem
  }
};
</script>

<style lang="less" scoped>
.container{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 90px;
  overflow: scroll;
  /deep/.van-cell__title{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
}
</style>
